<template>
  <!-- 头部自定义内容 -->
  <custom-header-vue :customTitle="customTitle" class="header" :backIcon="true">
    <!-- 具名插槽---区域类型 -->
    <template v-slot:custom>
      <view style="padding: 0 30rpx;padding-bottom: 20rpx;" class="flex-ali-cen">
        <picker @change="bindPickerChangeShop" :value="shopIndex"
                :range="shopList.map(item=>item.shop_alias)">
          <view class="flex-row flex-jus-bet" style="width: 100%;flex: 1">
            <view class="flex-row">
              <view class="f-s-28" style="color: var(--grey-text);">当前门店：</view>
              <view class="f-s-28" style="color: var(--white-text);align-items: center;">
                {{ shopList[shopIndex].shop_alias }}
              </view>
            </view>
            <view class="flex-row">
              <view class="f-s-28" style="color: #0A84FF;align-items: center">
                切换门店
              </view>
              <view style="margin-left: 4rpx">
                <uni-icons type="down" size="14" color="#0A84FF"></uni-icons>
              </view>
            </view>

          </view>
        </picker>
      </view>
      <view class="custom-search">
        <input class="uni-input" :placeholder="placeholderInput"
               placeholder-style="font-size:28rpx;text-indent:26rpx" adjust-position="false" cursor="20"
               selection-start="20" v-model="keyword_search" style="color: var(--white-text)"
               @confirm="handleSearchClick"/>
        <view class="sure-search" style="margin-left: 8rpx;" @click="handleSearchClick">搜索</view>
      </view>

      <view class="flex-row flex-jus-bet" style="padding: 20rpx 30rpx 0 30rpx;">
        <radio-group class="flex-row flex-ali-cen flex-jus-bet" style="flex: 1;">
          <label style="font-size: 26rpx;color: var(--grey-text);" class="radio-item"
                 :style="{'marginRight' : index!=3?'6rpx':'0'}" v-for="(item,index) in headFeild"
                 :key="index" @click="filterHeadRadioNo({'detail':{'value':item.value}})">
            <radio @click="filterHeadRadioNo({'detail':{'value':item.value}})"
                   :value="String(item.value)" :checked="chooseHeadValue == item.value"
                   active-background-color="#ff6f3f" activeBorderColor="#ff6f3f" borderColor="#333"
                   style="transform: scale(0.7);"/>
            {{ item.label }}
            <!-- 	<view  class="radio-label-title"
              style="font-size: 26rpx;color: var(--grey-text);"></view> -->
          </label>
        </radio-group>
      </view>

      <view class="flex-row flex-jus-bet flex-ali-cen" style="padding: 20rpx 30rpx 0 30rpx;">
        <view>
          <checkbox-group class="flex-row flex-wrap" style="row-gap: 20rpx;" @change="filterHeadCheck">
            <view class="choose-type-area">
              <label class="flex-row flex-ali-cen" style="font-size: 26rpx;color: var(--grey-text);">
                <checkbox :value="'1'" style="scale: 0.7;"/>
                有可取存酒客户
              </label>
            </view>
          </checkbox-group>
        </view>
        <view class="header-intro" style="font-size: 26rpx;text-align: center;color: #5697D7;">
          {{ pagesData.total }}人
        </view>
        <view class="flex-row flex-ali-cen" @click="showDepart">
          <view style="font-size: 26rpx;color: #5697D7">部门人员</view>
          <uni-icons type="right" size="14" color="#5697D7"></uni-icons>
        </view>
      </view>
      <view class="header-field-title">
        <view v-for="(item,index) in titleList" :key="index" @click="chooseTitle(index)">
          <view class="header-field-title-name" v-if="item!='line'">
            <view :class="{'header-field-active':chooseIndex == index}">{{ item }}</view>
            <uni-icons v-if="chooseIndex == index" type="down" size="14" color="#5697D7"></uni-icons>
            <uni-icons v-if="chooseIndex != 4 && chooseIndex != index" type="right" size="14"
                       :color="iconColor"></uni-icons>
            <uni-icons v-if="index == 4" :type="orderBy.icon" size="14" :color="iconColor"></uni-icons>
          </view>
          <view class="header-field-title-split" v-else></view>
        </view>
      </view>
      <!-- 标签筛选 -->
      <view v-show="chooseIndex == 0" class="title-header-body">
        <view class="header-intro" v-if="signList.length>0">*系统自动化标签，筛选请打钩点击确定</view>
        <view style="margin-top: 20rpx;">
          <checkbox-group class="flex-row flex-wrap" style="row-gap: 20rpx;" v-if="signList.length>0"
                          @change="signCheck">
            <view class="choose-type-area" v-for="(item, index) in signList" :key="index"
                  style="width: 33%;">
              <checkbox :value="String(item.id)" style="scale: 0.7;"/>
              <view>{{ item.label }}</view>
            </view>
          </checkbox-group>
          <view v-else class="header-intro" style="text-align: center;">未查询到系统标签列表</view>
        </view>
        <view class="flex-row flex-jus-bet flex-ali-cen" style="height: 88rpx;">
          <view class="cancel" @click="cancel()">取消</view>
          <view class="sure" @click="sure">确定</view>
        </view>
      </view>
      <!-- 条件筛选 -->
      <view v-show="chooseIndex == 2" class="title-header-body">
        <view class="header-intro">*查询对应条件时先勾上选择框，再点击确定</view>
        <view style="margin-top: 20rpx;">
          <view class="flex-col">
            <checkbox-group @change="filterCheck">
              <view v-for="(item, index) in conditionList" :key="index" style="margin-bottom: 20rpx;">
                <view class="choose-type-area" style="width: 100%;flex-direction: row;">
                  <checkbox :value="String(index)" style="scale: 0.7;"/>
                  <!-- radio选择项 -->
                  <view v-if="item.type == 'radio'" class="flex-row flex-ali-cen m-l-6">
                    <view class="content-intro">{{ item.name }}</view>
                    <radio-group @change="radioChange($event,item,index)"
                                 class="flex-row flex-ali-cen">
                      <label class="radio-item" style="margin-right: 20rpx;">
                        <radio value="'1'" :checked="item.value == '1'"
                               active-background-color="#ff6f3f" activeBorderColor="#ff6f3f"
                               borderColor="#333" style="transform: scale(0.7);">
                        </radio>
                        <text class="radio-label">是</text>
                      </label>
                      <label class="radio-item">
                        <radio value="'2'" :checked="item.value == '2'"
                               active-background-color="#ff6f3f" activeBorderColor="#ff6f3f"
                               borderColor="#333" style="transform: scale(0.7);">
                        </radio>
                        <text class="radio-label">否</text>
                      </label>
                    </radio-group>
                  </view>
                  <!-- 输入框选择项 -->
                  <view v-if="item.type == 'input'" class="flex-row flex-ali-cen m-l-6">
                    <view class="content-intro">{{ item.start_name }}</view>
                    <input class="uni-input-feild" :placeholder="item.place"
                           placeholder-style="font-size:24rpx;text-indent:26rpx;line-height: 56rpx;height:55rpx"
                           adjust-position="false" cursor="20" selection-start="20"
                           v-model="item.value" style="color: var(--white-text)"/>
                    <view class="content-intro">{{ item.end_name }}</view>
                  </view>
                </view>
              </view>
            </checkbox-group>
          </view>
        </view>
        <view class="flex-row flex-jus-bet flex-ali-cen" style="height: 88rpx;">
          <view class="cancel" @click="cancel()">取消</view>
          <view class="sure" @click="sure">确定</view>
        </view>
      </view>
    </template>
  </custom-header-vue>
  <view class="content">
    <scroll-view class="scroll" scroll-y :style="{'top':topHeight+'px','height':scrollHeight}"
                 v-if="chooseIndex!=0 && chooseIndex!=2" @scrolltolower="finishPullUp" :scroll-top="scrollTop"
                 @scroll="scroll" :show-scrollbar="false">
      <view class="body-child" v-for="(item,index) in customList" :key="index" v-if="customList.length>0"
            :style="{'paddingTop':index==0?'16rpx':0}">
        <view class="content-display" :style="{'marginTop':index!=0?'30rpx':'0rpx'}">
          <view class="content-title">
            <view class="content-title-left">{{ item.customer_name || '贵宾' }}</view>
            <view class="content-title-right" @click="copyPhoneNumber(item.customer_phone)">
              <view class="content-title-phone" style="margin-right: 6rpx;">
                {{ item.customer_phone || '未录入电话' }}
              </view>
              <uni-icons custom-prefix="iconfont" type="icon-igw-f-copy" size="14"
                         :color="iconColor"></uni-icons>
            </view>
          </view>
          <view class="line-split"></view>
          <view class="flex-col" style="padding:15rpx 20rpx 15rpx 20rpx;" @click="goDetail(item)">
            <view class="flex-row flex-jus-bet flex-ali-cen" style="height: 60rpx;line-height: 60rpx;">
              <view>
                <text class="content-intro">加入日期：</text>
                <text class="content-value">{{ formatDate(item.create_time) }}</text>
              </view>
              <view class="flex-row flex-ali-cen">
                <text class="content-intro">来源：</text>
                <text class="content-from">{{ item.from || '未查询' }}</text>
              </view>
            </view>

            <view class="flex-row flex-ali-cen"
                  style="height: 60rpx;line-height: 60rpx;box-sizing: border-box"
                  v-if="item.labels!='' && item.labels">
              <view class="content-intro" style="white-space: nowrap">标签列表：</view>
              <view class="content-value"
                    style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden">{{ item.labels }}
              </view>
            </view>

            <view class="flex-row flex-ali-cen"
                  style="height: 60rpx;line-height: 60rpx;box-sizing: border-box"
                  v-if="item.sales_list!='' && item.sales_list">
              <view class="content-intro" style="white-space: nowrap">订台销售：</view>
              <view class="content-value"
                    style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden">
                {{ item.sales_list }}
              </view>
            </view>

            <view class="flex-row flex-jus-bet flex-ali-cen" style="height: 60rpx;line-height: 60rpx;">
              <view>
                <text class="content-intro">消费/金额：</text>
                <text class="content-value">
                  {{ formatNumber(item.consume_num) || 0 }}次 /
                  {{ formatAmount(item.consume_money) || 0 }}{{ item.consume_money >= 10000 ? '万' : '元' }}
                </text>
              </view>
              <view class="flex-row flex-ali-cen">
                <text class="content-intro">充值/金额：</text>
                <text class="content-value">{{ formatNumber(item.charge_num) || 0 }}次 /
                  {{ formatAmount(item.charge_money) || 0 }}{{ item.charge_money >= 10000 ? '万' : '元' }}
                </text>
              </view>
            </view>

            <view class="flex-row flex-jus-bet flex-ali-cen" style="height: 60rpx;line-height: 60rpx;">
              <view class="flex-row flex-ali-cen">
                <text class="content-intro">身份标识：</text>
                <view class="flex-row flex-ali-cen">
                  <view class="content-from-sub"
                        v-if="item.save_status!='' && item.save_status!=null"
                        style="margin-right: 14rpx;color: #8BB5DF;border: solid 1px #8BB5DF;">存酒
                  </view>
                  <view class="content-from-sub"
                        v-if="item.member_status!='' && item.member_status!=null"
                        style="margin-right: 14rpx;color: #91c9b7;border: solid 1px #91c9b7;">会员
                  </view>
                  <view class="content-from-sub"
                        v-if="item.label_status!='' && item.label_status!=null"
                        style="margin-right: 14rpx;color: #B7B772;border: solid 1px #B7B772;">标签
                  </view>
                  <view class="content-from-sub" style="color: #d3a661;border: solid 1px #d3a661;"
                        v-if="item.room_status!='' && item.room_status!=null">订台
                  </view>
                </view>
              </view>
              <view class="flex-row flex-ali-cen">
                <view style="font-size: 24rpx;color: #5697D7">详情</view>
                <view style="margin-left: 4rpx;">
                  <uni-icons type="right" size="14" color="#5697D7"></uni-icons>
                </view>
              </view>
            </view>

          </view>
        </view>
      </view>
      <view v-if="customList.length == 0 && requestLoading == 2"
            style="font-size: 28rpx;color: var(--grey-text);text-align: center;margin-top: 220rpx;">
        未找到符合客户列表
      </view>
      <view class="load-bottom">
        <view v-if="loadingFlag == 1" class="load_in" :class="loadingFlag == 1 ? 'load_in_ani' : ''">
          <uni-icons type="spinner-cycle" size="30" color="#ff6f3f"></uni-icons>
        </view>
        <view v-show="loadingFlag == 2" class="load_over">数据已全部加载~</view>
      </view>
    </scroll-view>
  </view>

  <!-- 部门数据 -->
  <view style="position: absolute;z-index: 101;max-height: 80vh;min-height: 50vh;">
    <uni-popup ref="popupDepart" type="bottom" :background-color="bgColor">
      <scroll-view class="scroll-performance-detail" style="max-height: 79vh;min-height: 49vh;" scroll-y>
        <view>
          <view class="depart-sure-cancel">
            <view style="font-size: 28rpx;color: rgb(150 148 148)" @click="cancelDepart">取消</view>
            <view style="color: #8383ff;font-size: 28rpx;" @click="sureDepart">确定</view>
          </view>
        </view>
        <view class="line-split"></view>
        <view class="depart-child-item">
          <checkbox-group @change="changeItemStatus">
            <view class="depart-popup-content" v-for="(item,index) in departData" :key="index">
              <view class="font-28 text-white-black" style="width: 55%;">
                {{ item.depart_name }}
              </view>
              <view class="font-28 text-white-black" style="width: 30%;">
                {{ item.num }}人
              </view>
              <view style="width: 15%;justify-content: end;display: flex;">
                <checkbox :value="String(item.depart_id)" :checked="item.checked"/>
              </view>
            </view>
          </checkbox-group>
        </view>
      </scroll-view>
    </uni-popup>
  </view>
  <custom-loading-vue ref="loadings"></custom-loading-vue>
</template>

<script setup>
import customHeaderVue from '@/components/customHeader.vue'
import customLoadingVue from '@/components/customLoading.vue'
import {
  nextTick,
  onMounted,
  ref,
  getCurrentInstance
} from 'vue';
import {
  onLoad
} from '@dcloudio/uni-app'

const instance = getCurrentInstance()
const commonJs = instance?.proxy?.$commonJs
const shopIndex = ref(commonJs.getChooseShopIndex())
const shopList = ref(commonJs.getShopList())
const userInfo = commonJs.getUserInfo()
const popupDepart = ref(Object)
const departData = ref([])
const chooseDepartIds = ref([])
const requestLoading = ref(1)
const bgColor = ref('var(--bg-color)')
const chooseHeadValue = ref('')
const customTitle = ref('客户管理')
const placeholderInput = ref('请输入电话、姓名、标签检索')
const keyword_search = ref('')
const iconColor = ref('var(--grey-text)')
const topHeight = ref(0)
const loadingFlag = ref(0)
const scrollHeight = ref(0)
const chooseIndex = ref(-1)
const titleList = ref(['标签筛选', 'line', '条件筛选', 'line', '排序(新增)'])
const orderBy = ref({
  orderBy: 'desc',
  icon: 'arrow-down'
})
const signList = ref([])
const customList = ref([])
const headFeild = ref([{
  label: '15天未到',
  value: "1"
}, {
  label: '15天内到',
  value: "2"
}, {
  label: '30天未到',
  value: "3"
}, {
  label: '30天内到',
  value: "4"
}])
const chooseHeadFeild = ref({})
const chooseHeadCheckBox = ref([])
const conditionList = ref([
  {
    type: 'input',
    name: '',
    start_name: '存酒即将在',
    end_name: '天内过期',
    value: '',
    place: '输入天数',
    key: 'wine_expire_day'
  },
  {
    type: 'radio',
    name: '是否是会员：',
    start_name: '',
    end_name: '',
    value: 1,
    place: '',
    key: 'is_member'
  },
  {
    type: 'input',
    name: '',
    start_name: '主卡余额大于等于',
    end_name: '元',
    value: '',
    place: '输入金额',
    key: 'main_money'
  },
  {
    type: 'input',
    name: '',
    start_name: '副卡余额大于等于',
    end_name: '元',
    value: '',
    place: '输入金额',
    key: 'sub_money'
  },
  {
    type: 'radio',
    name: '是否充值过：',
    start_name: '',
    end_name: '',
    value: 1,
    place: '',
    key: 'is_charge'
  },
  {
    type: 'input',
    name: '',
    start_name: '单次充值金额大于等于',
    end_name: '元',
    value: '',
    place: '输入金额',
    key: 'charge_money'
  },
  {
    type: 'input',
    name: '',
    start_name: '累计充值金额大于等于',
    end_name: '元',
    value: '',
    place: '输入金额',
    key: 'member_recharge_money'
  },
  {
    type: 'input',
    name: '',
    start_name: '单次消费金额大于等于',
    end_name: '元',
    value: '',
    place: '输入金额',
    key: 'use_money'
  },
  {
    type: 'input',
    name: '',
    start_name: '累计消费金额大于等于',
    end_name: '元',
    value: '',
    place: '输入金额',
    key: 'member_use_money'
  },
  {
    type: 'input',
    name: '',
    start_name: '累计消费次数大于等于',
    end_name: '次',
    value: '',
    place: '输入次数',
    key: 'consume_number'
  },
  {
    type: 'radio',
    name: '是否有优惠券：',
    start_name: '',
    end_name: '',
    value: 1,
    place: '',
    key: 'is_coupon'
  },
  {
    type: 'input',
    name: '',
    start_name: '优惠券即将在',
    end_name: '天内过期',
    value: '',
    place: '输入天数',
    key: 'coupon_expire_day'
  },
])
const pagesData = ref({
  page: 1,
  limit: 20,
  total: 0
})
const chooseSignVal = ref([])
const chooseFilterVal = ref({})
const scrollTop = ref(0)
const old = ref({
  scrollTop: 0
})
const loadings = ref(null)

/**
 * 动态高度计算
 */
onMounted(() => {
  const query = uni.createSelectorQuery().in(this);
  query.select(".header")
      .boundingClientRect((data) => {
        topHeight.value = data.height
        let height = '100vh',
            top = data.height + 'px'
        scrollHeight.value = `calc(${height} - ${top})`
      })
      .exec();
  getSystemLabelList()
  getCustomList()
})

onLoad(() => {

})

/**
 * 部门展示
 * @return {Promise<void>}
 */
const showDepart = async () => {
  await getDepartCustom()
  popupDepart.value.open()
}

/**
 * 门店切换
 * @param e
 */
const bindPickerChangeShop = (e) => {
  if (e.detail.value >= 0 && e.detail.value != commonJs.systemConfig.shopIndex) {
    shopIndex.value = e.detail.value
    commonJs.systemConfig.shopIndex = e.detail.value
    commonJs.setStorage(
        'shopIndex',
        e.detail.value,
        function () {
          commonJs.logger.debug('设置门店成功！')
        }
    )
    resetPages()
    getSystemLabelList()
    getCustomList()
  }
}

/**
 * 子部门选择
 * @param e 选中值
 */
const changeItemStatus = (e) => {
  let chooseIdArray = e.detail.value
  departData.value = departData.value.map((item) => {
    if (chooseIdArray.includes(String(item.depart_id))) {
      item.checked = true
    } else {
      item.checked = false
    }
    return item
  })
}

/**
 * 格式化处理
 * @param money
 * @returns {string|*}
 */
const formatNumber = (money) => {
  // 判断是否为整数（即小数部分是否为 0）
  if (money % 1 === 0) {
    return Number(money).toString()
  } else {
    return Number(money).toFixed(2)
  }
}

/**
 * 格式化金额
 * @param amount
 * @return {string}
 */
const formatAmount = (amount) => {
  if (amount >= 10000) {
    return (amount / 10000).toFixed(2);
  } else {
    // 格式化为千分位
    if (amount % 1 === 0) {
      return Number(amount).toString()
    } else {
      return Number(amount).toFixed(2)
    }

  }
}

/**
 * 确定选择的部门
 */
const sureDepart = () => {
  popupDepart.value.close()
  resetPages()
  getCustomList()
}

const cancelDepart = () => {
  popupDepart.value.close()
}

const filterHeadCheck = (e) => {
  chooseHeadCheckBox.value = e.detail.value
  resetPages()
  getCustomList()
}

const filterHeadRadioNo = (e) => {
  if (chooseHeadValue.value == e.detail.value) {
    nextTick(() => {
      chooseHeadValue.value = ''
    })
    chooseHeadFeild.value = {}
  } else {
    chooseHeadValue.value = e.detail.value
    let chooseValue = {}
    switch (e.detail.value) {
      case '1':
        chooseValue = {
          not_arrived_15day: 1
        }
        break;
      case '2':
        chooseValue = {
          arrived_15day: 1
        }
        break;
      case '3':
        chooseValue = {
          not_arrived_30day: 1
        }
        break;
      case '4':
        chooseValue = {
          arrived_30day: 1
        }
        break;
    }
    chooseHeadFeild.value = chooseValue
  }
  resetPages()
  getCustomList()
}

const filterHeadRadio = (e) => {
  chooseHeadValue.value = e.detail.value
  let chooseValue = {}
  switch (e.detail.value) {
    case '1':
      chooseValue = {
        not_arrived_15day: 1
      }
      break;
    case '2':
      chooseValue = {
        arrived_15day: 1
      }
      break;
    case '3':
      chooseValue = {
        not_arrived_30day: 1
      }
      break;
    case '4':
      chooseValue = {
        arrived_30day: 1
      }
      break;
  }
  chooseHeadFeild.value = chooseValue
  resetPages()
  getCustomList()
}

const scroll = (e) => {
  old.value.scrollTop = e.detail.scrollTop
}

const signCheck = (e) => {
  chooseSignVal.value = e.detail.value
}

const filterCheck = (e) => {
  chooseFilterVal.value = e.detail.value
}

const handleSearchClick = async () => {
  resetPages()
  getCustomList()
}

/**
 * 切换单选
 * @param v
 */
const radioChange = (event, item, index) => {
  conditionList.value[index].value = event.detail.value
}

const sure = (e) => {
  cancel()
  resetPages()
  getCustomList()
}

const copyPhoneNumber = (phone) => {
  uni.makePhoneCall({
    phoneNumber: phone
  });
}

/**
 * 标签列表
 */
const getSystemLabelList = () => {
  const params = {}
  commonJs.queryCache('/admin/member/getAllLabelRule', params, {
    before() {
    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        signList.value = data
      } catch (error) {
        commonJs.showMessage(error)
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})
}

/**
 * 部门列表
 */
const getDepartCustom = () => {
  const params = {
    phone: userInfo.phone
  }
  commonJs.queryCache('/app/admin/getCustomDepart', params, {
    before() {
    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        filterDepartChoose(chooseDepartIds.value, data)
      } catch (error) {
        commonJs.showMessage(error)
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})
}

/**
 * 部门赋值
 * @param departIds 选中的部门ID集合
 * @param allDepart 获取的部门列表信息
 */
const filterDepartChoose = (departIds, allDepart) => {
  // 已勾选的部门选中
  departData.value = allDepart.map(item => {
    if (departIds.length > 0 && departIds.includes(item.depart_id)) {
      item.checked = true
    }
    return item
  })
}

/**
 * 下拉刷新
 * @param e
 * @return {Promise<void>}
 */
const finishPullUp = (e) => {
  if (loadingFlag.value == 1 || loadingFlag.value == 2) {
    return
  }
  let pages = Math.ceil(pagesData.value.total / pagesData.value.limit)
  if (pagesData.value.page >= pages) {
    loadingFlag.value = 2
    return
  }
  if (loadingFlag.value == 0) {
    loadingFlag.value = 1
    pagesData.value.page++
    getCustomList()
  }
}

/**
 * 获取客户列表
 */
const getCustomList = () => {
  requestLoading.value = 1
  let labelFilter = chooseSignVal.value.length > 0 ? signList.value.filter(item => chooseSignVal.value
      .includes(
          String(item.id))).map(item => item.label) : []
  let params = {
    phone: userInfo.phone,
    limit: pagesData.value.limit,
    page: pagesData.value.page,
    search: keyword_search.value,
    subject: [],
    not_subject: [],
    min_score: "",
    max_score: "",
    label: labelFilter,
    order_by: orderBy.value.orderBy
  }
  if (chooseFilterVal.value.length > 0) {
    let filterData = conditionList.value.filter((item, index) =>
        chooseFilterVal.value.includes(String(index))) || []
    if (filterData.length > 0) {
      filterData.forEach((item, index) => {
        params[item.key] = item.value
      })
    }
  }
  if (Object.keys(chooseHeadFeild.value).length > 0) {
    params = Object.assign(params, chooseHeadFeild.value)
  }
  if (chooseHeadCheckBox.value.length > 0) {
    params = Object.assign(params, {
      wine_save: 1
    })
  }
  if (departData.value.length > 0) {
    let chooseDepart = departData.value.filter(item => item.checked).map(item => item.depart_id)
    if (chooseDepart.length > 0) {
      chooseDepartIds.value = chooseDepart
      params = Object.assign(params, {
        depart_id: chooseDepart.join()
      })
    } else {
      chooseDepartIds.value = []
    }
  } else {
    chooseDepartIds.value = []
  }
  commonJs.queryCache('/app/admin/customList', params, {
    before() {
      loadings.value.show('加载中...')
    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        requestLoading.value = 2
        if (data.hasOwnProperty('list') && data.hasOwnProperty('count')) {
          customList.value = [...customList.value, ...data.list]
          pagesData.value.total = data.count
        }
      } catch (error) {
        commonJs.showMessage(error)
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    },
    complete() {
      loadings.value.hide()
      loadingFlag.value = 0
    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})
}

/**
 * 格式化日期
 * @param dateTime
 * @return {string}
 */
const formatDate = (dateTime) => {
  if (dateTime == '' || dateTime == null || dateTime == undefined) {
    return '未找到'
  }
  const date = new Date(dateTime);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需加 1
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

/**
 * 查询明细
 * @param item
 */
const goDetail = (item) => {
  let name = item.customer_name || '贵宾'
  uni.navigateTo({
    url: `/pages/application/custom_ana_detail?name=${name}&phone=${item.customer_phone}&id=${item.id}`
  })
}

const chooseTitle = (index) => {
  if (index == 4) {
    orderBy.value = orderBy.value.orderBy == 'desc' ? {
      orderBy: 'asc',
      icon: 'arrow-up'
    } : {
      orderBy: 'desc',
      icon: 'arrow-down'
    },
        chooseIndex.value = -1
    resetPages()
    getCustomList()
    return
  }
  if (index == chooseIndex.value) {
    chooseIndex.value = -1
    return
  }
  chooseIndex.value = index
}

const resetPages = () => {
  pagesData.value.page = 1
  loadingFlag.value = 0
  scrollTop.value = old.value.scrollTop
  nextTick(() => {
    scrollTop.value = 0
  })
  customList.value = []
}

const cancel = () => {
  chooseIndex.value = -1
}
</script>

<style scoped lang="scss">
.detail-title-performance {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  position: fixed;
  top: 0;
  z-index: 102;
  background-color: var(--bg-color);
}

.depart-sure-cancel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 30rpx;
  height: 70rpx;
  line-height: 70rpx;
}

.depart-popup-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 70rpx;
  line-height: 70rpx;
  padding: 10rpx 30rpx 10rpx 30rpx;
}

.depart-child-item {
  display: flex;
  flex-direction: column;
  overflow: auto;
  max-height: 1000rpx;
  min-height: 500rpx;
}

.header-intro {
  font-size: 24rpx;
  color: var(--grey-text);
}

.cancel {
  font-size: 28rpx;
  color: var(--grey-text);
}

.sure {
  font-size: 28rpx;
  color: #5697D7;
}

.m-l-6 {
  margin-left: 6rpx;
}

.radio-label {
  margin-left: 8px;
  font-size: 24rpx;
  color: var(--grey-text);
}

.radio-label-title {
  font-size: 24rpx;
  color: var(--grey-text);
}

.radio-item {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.title-header-body {
  padding: 0rpx 30rpx 0rpx 30rpx;
}

.choose-type-area {
  font-size: 26rpx;
  color: var(--grey-text);
  display: flex;
  align-items: center;
}

:deep(checkbox uni-checkbox::before) {
  color: var(--area-color) !important;
  z-index: 102;
}

:deep(.uni-checkbox-wrapper .uni-checkbox-input) {
  background-color: var(--area-color) !important;
  z-index: 102;
  border: 1px solid #8b8a8a;
}

.header-field-active {
  color: #5697D7
}

.content-value {
  font-size: 24rpx;
  color: var(--white-text);
}

.content-intro {
  font-size: 24rpx;
  color: var(--grey-text);
}

.flex {
  display: flex;
  align-items: center;

  &-row {
    flex-direction: row;
  }

  &-wrap {
    flex-wrap: wrap;
  }

  &-nowrap {
    flex-wrap: nowrap;
  }

  &-col {
    flex-direction: column;
  }

  &-1 {
    flex: 1;
  }

  &-shrink {
    flex-shrink: 0;
  }

  &-jus-cen {
    justify-content: center;
  }

  &-jus-bet {
    justify-content: space-between;
  }

  &-jus-aro {
    justify-content: space-around;
  }

  &-jus-eve {
    justify-content: space-evenly;
  }

  &-jus-self-end {
    justify-self: end;
  }

  &-ali-cen {
    align-items: center;
  }

  &-ali-sta {
    align-items: flex-start;
  }

  &-ali-end {
    align-items: flex-end;
  }
}

.custom-search {
  flex: 1;
  display: flex;
  flex-direction: row;
  height: 70rpx;
  line-height: 70rpx;
  align-items: center;
  padding: 0 30rpx 0 30rpx;
}

.uni-input-feild {
  background-color: var(--input-bg);
  border-radius: 10rpx;
  width: 180rpx;
  display: flex;
  height: 55rpx;
  line-height: 55rpx;
  flex: 1;
  text-indent: 20rpx;
  font-size: 24rpx;
  margin: 0 10rpx;
}

.uni-input {
  background-color: var(--input-bg);
  border-radius: 40rpx;
  width: 100%;
  display: flex;
  height: 65rpx;
  flex: 1;
  text-indent: 30rpx;
}

.sure-search {
  font-size: 28rpx;
  color: var(--grey-text);
}

.header-field-title {
  display: flex;
  flex-direction: row;
  padding: 0 30rpx;
  justify-content: space-between;
  height: 80rpx;
  line-height: 80rpx;
  align-items: center;

  .header-field-title-split {
    height: 30rpx;
    width: 2rpx;
    background: var(--white-text);
    transform: scaleX(0.3);
  }

  .header-field-title-name {
    display: flex;
    flex-direction: row;
    font-size: 28rpx;
    color: var(--grey-text);
  }
}

.content {
  width: 100%;

  .scroll {
    box-sizing: border-box;
    display: flex;
    position: absolute;
    padding: 4rpx 30rpx 4rpx 30rpx;

    .content-display {
      height: auto;
      background-color: var(--bg-center-color);
      border-radius: 20rpx;

      .content-from {
        height: 48rpx;
        padding: 0 20rpx;
        text-align: center;
        line-height: 48rpx;
        border-radius: 16rpx;
        font-size: 24rpx;
        color: var(--text-color);
        background: rgba(118, 128, 128, 0.1);
      }

      .content-from-sub {
        height: 48rpx;
        padding: 0 20rpx;
        text-align: center;
        line-height: 48rpx;
        border-radius: 16rpx;
        font-size: 24rpx;
      }

      .content-title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0 20rpx;
        height: 70rpx;
        line-height: 70rpx;
        align-items: center;

        .content-title-left {
          font-size: 28rpx;
          font-weight: 600;
          color: var(--white-text);
        }

        .content-title-right {
          display: flex;
          flex-direction: row;

          .content-title-phone {
            font-size: 28rpx;
            color: var(--white-text);
          }
        }
      }
    }
  }
}
</style>